<template>
	<div>
		<div class="g-oper">
			<i  title="筛选报价单" class="icon-sift my-pink"></i>
			<i  title="添加报价单" @click="dialogVisible = true" class="icon-i-add my-red" v-on:click=""></i>
		</div>

		<el-dialog
		  title="新建报价单"
		  :visible.sync="dialogVisible"
		  width="450px"
		  :before-close="handleClose">
		 <el-form class="quotation-form" ref="form" :model="form" label-width="80px">
		 	<el-form-item label="客户名称">
		      <el-input size="small" v-model="form.name"></el-input>
		    </el-form-item>
		    <el-form-item label="客户名称">
		      <el-button size="mini" @click="chooseCustomerDialogVisible = true" type="primary">选择客户</el-button>
		    </el-form-item>
		    <el-form-item label="币种">
			    <el-select size="small" v-model="form.type" placeholder="请选择币种">
			      <el-option label="RMB" value="1"></el-option>
			      <el-option label="USD" value="2"></el-option>
			      <el-option label="GBP" value="3"></el-option>
			      <el-option label="EUR" value="4"></el-option>
			      <el-option label="AUD" value="5"></el-option>
			      <el-option label="CAD" value="6"></el-option>
			      <el-option label="CHF" value="7"></el-option>
			      <el-option label="JPY" value="8"></el-option>
			      <el-option label="HKD" value="9"></el-option>
			    </el-select>
		    </el-form-item>
		    <el-form-item label="汇率">
		      <el-input placeholder="请输入内容" style="width: 100px" size="mini" v-model="huilv" :disabled="true">
		      	
		      </el-input>
		    </el-form-item>
		    <el-form-item label="报价日期">
		      <el-date-picker size="small" v-model="date" type="date" placeholder="选择日期"></el-date-picker>
		    </el-form-item>
		    <el-form-item label="备注">
		      <el-input type="textarea"  resize="none" placeholder="请输入内容" v-model="beizhu"></el-input>
		    </el-form-item>
		 </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="createQuotation">确 定</el-button>
		  </span>
		</el-dialog>

		<el-dialog
		  title="提示"
		  :visible.sync="chooseCustomerDialogVisible"
		  width="450px"
		  :before-close="handleClose">
		  <el-form ref="form2" v-model="state3" label-width="80px">
		    <el-form-item label="关键字:">
		      <el-input size="mini" v-model="form2.name"></el-input>
			</el-form-item>
			<el-autocomplete
			  popper-class="my-autocomplete"
			  v-model="state3"
			  style="width: 83%"
			  :fetch-suggestions="querySearch"
			  placeholder="请输入内容"
			  @select="handleSelect"
			  size="mini">
			  <i
			    class="el-icon-search el-input__icon"
			    slot="prefix"
			    @click="handleIconClick">
			  </i>
			  <template slot-scope="{ item }">
			    <div class="name">{{ item.value }}</div>
			    <span class="addr">{{ item.address }}</span>
			  </template>
			</el-autocomplete>
			<el-button size="mini" type="primary" @click="dialogVisible">筛选</el-button>
		  </el-form>		
		  <div class="select-customer-content">
			  <el-radio-group v-model="selectCustomer" style="width: 100%">
			  	<div class="select-customer-item"><el-radio :label="3">Mr. Marty Roberts1</el-radio></div>
			    <div class="select-customer-item"><el-radio :label="6">Mr. Marty Roberts2</el-radio></div>
			    <div class="select-customer-item"><el-radio :label="9">Mr. Marty Roberts3</el-radio></div>
			    <e:label="9" style="display: block;">Mr. jan Van Poortvliet</el-radio>
			  </el-radio-group>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
	  name: 'Quotation',
	  data () {
	    return {
	    	form:{
	    		name:"",
	    		type:"",
	    	},
	    	form2:{
	    		name:"",
	    		type:"",
	    	},
	    	state3:"",
	    	selectCustomer:"",
	    	customerType:[],
	    	date:new Date(),
	    	huilv:"1:100",
	    	beizhu:"",
	    	dialogVisible:false,
	    	chooseCustomerDialogVisible:false
	    }
	  },
	  methods:{
	  	createQuotation:function(){
	  		this.dialogVisible = false
	  	},
	  	handleClose(done) {
	        this.$confirm('确认关闭？')
	          .then(_ => {
	          done();
	        })
	        .catch(_ => {});
	    },
	    querySearch(queryString, cb) {
	        var customerType = this.customerType;
	        var results = queryString ? customerType.filter(this.createFilter(queryString)) : customerType;
	        cb(results);
	      },
	      createFilter(queryString) {
	        return (customerType) => {
	          return (customerType.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
	        };
	      },
	      loadAll() {
	        return [
	          { "value": "全部" },
	          { "value": "新开发客户" },
	          { "value": "报价客户"},
	          { "value": "谈判客户"},
	          { "value": "样品客户"},
	          { "value": "大货客户" },
	          { "value": "未分组" },
	        ];
	      },
	      handleSelect(item) {
	        console.log(item);
	      },
	      handleIconClick(ev) {
	        console.log(ev);
	      }
	  },
	  mounted() {
		this.customerType = this.loadAll();
		}	
	}
</script>

<style scoped>
.select-customer-content{
	padding: 10px;
}
.select-customer-item{
	padding: 10px;
    border-bottom: 1px #ccc solid;
    width: 90%;
}
.quotation-form>div{
	margin:8px 0;
}
.quotation-form *{
	font-size: 12px;
}
</style>